<template>
  <div id="hello">
    <div>{{ count }}</div>
    <button @click="count++">add</button>
  </div>
</template>
</script>

<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'
let count = ref(1)
// 生命周期
console.log('setup');
onBeforeMount(() => {
  console.log('创建之前');
  
})
onMounted(() => {
  console.log('组件创建完成后');
})
onBeforeUpdate(() => {
  console.log('更新前');
})
onUpdated(() => {
  console.log('更新后');
})
onBeforeUnmount(() => {
  console.log('组件卸载前');
})
onUnmounted(() => {
  console.log('组件完成');
})
</script>

<style lang="less">
</style>
